<template>
	<view class="login flex-c-c">
		<view class="wrap">
			<view class="wrap-nav flex">
				<view :class="num == 1 ? 'active': ''" @click="navBtn(1)">注册</view>
				<view :class="num == 2 ?'active': ''" @click="navBtn(2)">登录</view>
			</view>
			<view class="content">
				<view class="flex-c">
					<text>账号：</text>
					<uni-easyinput v-model="username" @blur="userBlur($event,1)" placeholder="请输入11位的手机号" trim style="flex: 1; margin-left: 20upx;" ></uni-easyinput>
				</view>
				<view class="flex-c m-t20">
					<text>密码：</text>
					<uni-easyinput type="password" @blur="userBlur($event,2)" v-model="password" placeholder="请输入6-12位的纯数字密码" trim style="flex: 1; margin-left: 20upx;" ></uni-easyinput>
				</view>
			</view>
			<button type="default" class="btn m-t20 " @click="submit">{{num == 1 ? '注册' : '登录'}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num : 1,
				username: '',
				password: ''
			}
		},
		watch:{
			num(p,n){
				uni.setNavigationBarTitle({
					title: p == 1 ? '注册' : ' 登录 '
				})
				
			}
		},
		
		methods: {
			//切换顶部导航
			navBtn(k){
				console.log(k)
				this.num = k;
				this.username = ''
				this.password = ''
				
			},
			//输入账号，密码进行赋值
			userBlur(e,k){
				const val = e.detail.value
				if(k == 1) {//账号进行校验
					const phone =  /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
					if(!phone.test(val)){
						uni.showToast({
							title: '账号错误',
							icon: 'none'
						})
						this.username = ''
						return ;
					}
					this.username = val;
				}
				if( k ==2 ) { //密码进行校验
					const p = /^\d{6,12}$/ 
					if(!p.test(val)){
						uni.showToast({
							title: '密码错误',
							icon: 'none'
						})
						this.password = ''
						return ;
					}
					this.password = val;
				}
				
			},
			//注册，登录按钮
			submit(){
				const params = {
					type: this.num == 1 ? 'sign' : 'login',
					name: this.username,
					password: this.password,
					openid: uni.getStorageSync('openid') || ''
				}
				this.$api('user',params).then(res=>{
					console.log(res);
					if(res.result.status === 'S'){
						if(this.num == 1) {//注册
							uni.showToast({
								title: res.result.message,
								icon: 'success'
							});
							this.num = 2;
						}else{//登录
							uni.setStorageSync('token',true);
							uni.setStorage({
								key:'phone',
								data: this.username
							})
							if(res.result.resume){
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}else{
								uni.reLaunch({
									url: '/pages/resume/resume'
								})
							}
						}
					}else{
						uni.showToast({
							title: res.result.message,
							icon: 'none'
						});
					}
				}).catch(msg=>{
					console.log(msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.login{
		width: 100%;
		height: 100%;
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F36037f9b3b7904b82d67132dcf3aa012b258f99655f0a-okpx4y_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647397099&t=b0157c51df16af2b49716d7503a808db') no-repeat ;
		background-size: 100% 100%;
		.wrap{
			width: 80%;
			box-sizing: border-box;
			padding: 20upx;
			border-radius: 20upx;
			background-color: rgba($color: #fff, $alpha: .5);
			.wrap-nav{
				text-align: center;
			}
			.wrap-nav view{
				width: 50%;
				
			}
			 .active:after{
				display: block;
				content: '';
				position: relative;
				left: 50%;
				bottom: 0;
				transform: translate(-50%);
				width: 40upx;
				height: 4upx;
				background-color: red;
			}
			.content{
				margin: 20upx 0;
				.is-input-border{
					border-color: #868686 !important;
				}
			}
			.btn{
				display: inline-block;
				width: 100%;
				background-color: #0ff3ff;
			}
		}
	}
</style>
